import path from "path";
import { VueLoaderPlugin } from "vue-loader";
import HtmlWebpackPlugin from "html-webpack-plugin";
import url from "url";

const __filename = url.fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
/*
  需要下载的包：
    pnpm add webpack webpack-cli webpack-dev-server vue-loader vue-template-compiler vue-style-loader css-loader sass-loader sass babel-loader html-webpack-plugin -D

    5个核心配置：
      1. entry入口 -> 指示webpack从哪个文件开始进行打包 -> 指定项目入口文件
      2. output输出 -> 指示webpack打包完成的内容输出到哪里去（修改打包文件名称等）
      3. loader加载器 -> 
        webpack本身只能识别js/json，遇到css、vue、png等资源处理不了会直接报错
        webpack需要借助loader给这些文件进行编译，编译成webpack能识别的模块，webpack才能继续对文件进行打包
      4. plugin插件 -> 扩展webpack功能
      5. mode模式 -> 
          development 开发模式：编译代码，让代码能在浏览器端运行即可
          production 生产模式：编译代码，对代码进行性能优化（压缩代码...），让其运行性能更好
*/

// 默认打包工具都是运行在node环境，node环境默认支持的模块化就是commonjs
// module.exports = {}

const resolve = (relativePath) => {
  return path.resolve(__dirname, relativePath);
};

// 要想使用esm，就要在package.json设置type: "module"
export default {
  // 相对路径相对的是运行项目的目录
  // entry: "./src/main.js",
  entry: resolve("../src/main.js"),
  output: {
    path: resolve("../dist"), // 文件输出目录
    filename: "[name].js", // 文件输出名字
  },
  mode: "development", // 开发模式
  module: {
    rules: [
      {
        test: /\.vue$/, // 匹配哪些文件
        loader: "vue-loader", // 使用单个loader
      },
      {
        test: /\.css$/,
        use: ["vue-style-loader", "css-loader"], // 使用多个loader（从后往前执行）
      },
      {
        test: /\.s[a|c]ss$/,
        use: ["vue-style-loader", "css-loader", "sass-loader"], // 使用多个loader（从后往前执行）
      },
      {
        test: /\.(jpe?g|png|gif|webp)$/,
        type: "asset", // 小于某个大小图片，转base64格式 -> 性能优化：减少页面请求数量
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 10kb
          },
        },
      },
      {
        test: /\.js$/,
        loader: "babel-loader",
      },
    ],
  },
  plugins: [
    // 请确保引入这个插件！
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      // 复制 index.html 文件内容，自动引入打包生成js、css等资源
      template: resolve("../public/index.html"),
    }),
  ],
  // 启动服务器，自动运行打包后代码
  devServer: {
    port: 8080,
    open: true,
  },
};
